import React, { useEffect, useState } from 'react'
import { Card, Form, Select, Input, Button, Table } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

import { IprovinceList } from '@api/hospital/hospitalList/model/hospitalListTypes'
import { reqGetProvince } from '@api/hospital/hospitalList'

const { Option } = Select

export default function HospitalList() {
  // 省数据状态
  const [province, setProvince] = useState<IprovinceList>()
  useEffect(() => {
    // 组件挂载获取省数据
    getProvinceList()
  }, [])

  // 获取省数据
  async function getProvinceList() {
    const result = await reqGetProvince()
    setProvince(result)
  }

  const columns = [
    {
      title: '序号',
    },
    {
      title: '医院logo',
    },
    {
      title: '医院名称',
    },
    {
      title: '等级',
    },
    {
      title: '详细地址',
    },
    {
      title: '状态',
    },
    {
      title: '创建时间',
    },
    {
      title: '操作',
    },
  ]
  return (
    <Card>
      <Form layout="inline">
        <Form.Item name="provinceCode">
          <Select value={3} placeholder="请选择省" style={{ width: 180 }}>
            {province?.map((item) => {
              return (
                <Option key={item.value} value={item.value}>
                  {item.name}
                </Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item name="cityCode">
          <Select value={2} placeholder="请选择市" style={{ width: 180 }}>
            <Option value={1}>台北市</Option>
            <Option value={2}>高雄市</Option>
          </Select>
        </Form.Item>
        <Form.Item name="districtCode">
          <Select value={2} placeholder="请选择区" style={{ width: 180 }}>
            <Option value={1}>昌平区</Option>
            <Option value={2}>海淀区</Option>
          </Select>
        </Form.Item>
        <Form.Item name="hosname">
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item name="hoscode">
          <Input placeholder="医院编号"></Input>
        </Form.Item>
        <Form.Item name="hostype">
          <Select
            value={2}
            placeholder="医院类型"
            style={{ width: 180, marginTop: 20 }}
          >
            <Option value={1}>三级甲等</Option>
            <Option value={2}>二级甲等</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status">
          <Select
            value={0}
            style={{ width: 180, marginTop: 20 }}
            placeholder="医院状态"
          >
            <Option value={1}>已上线</Option>
            <Option value={0}>未上线</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            style={{ marginRight: 10, marginTop: 20 }}
            htmlType="submit"
            icon={<SearchOutlined />}
          >
            查询
          </Button>
          <Button type="default" style={{ marginTop: 20 }}>
            清空
          </Button>
        </Form.Item>
      </Form>

      <Table
        columns={columns}
        dataSource={[]}
        style={{ marginTop: 20 }}
      ></Table>
    </Card>
  )
}
